<template>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="应聘岗位"
      >
        <a-input
          v-decorator="[
            'jobApplication',
            { rules: [{ required: true, message: '请输入您的应聘岗位' }] },
          ]"
          placeholder="请输入您的应聘岗位"
        />
      </a-form-item>
      <a-form-item
       label="应聘日期"
       :label-col="formItemLayout.labelCol"
       :wrapper-col="formItemLayout.wrapperCol">
        <a-date-picker placeholder="应聘日期" v-decorator="['applicationDay', {rules: [{ type: 'object', required: true, message: '请输入应聘日期' }]}]" />
      </a-form-item>

      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="姓名"
      >
        <a-input
          v-decorator="[
            'name',
            { rules: [{ required: true, message: '请输入您的姓名' }] },
          ]"
          placeholder="请输入您的姓名"
        />
      </a-form-item>
      

      <a-form-item label="性别"
      :label-col="formItemLayout.labelCol"
       :wrapper-col="formItemLayout.wrapperCol">
      <a-radio-group v-decorator="['sex',{ rules: [{ required: true, message: '请选择您的性别' }] }]" >
        <a-radio value="男">
          男
        </a-radio>
        <a-radio value="女">
          女
        </a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item
       label="出生日期"
       :label-col="formItemLayout.labelCol"
       :wrapper-col="formItemLayout.wrapperCol">
        <a-date-picker placeholder="出生日期" v-decorator="['birthday', {rules: [{ type: 'object', required: true, message: '请输入出生日期' }]}]" />
      </a-form-item>

    <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="身份证号"
      >
        <a-input
          v-decorator="[
            'IDcard',
            { rules: [{ required: true, message: '请输入您的身份证号' }] },
          ]"
          placeholder="请输入您的身份证号"
        />
      </a-form-item>

      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="民族"
      >
        <a-input
          v-decorator="[
            'nation',
            { rules: [{ required: true, message: '请输入您的民族' }] },
          ]"
          placeholder="请输入您的民族"
        />
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="毕业学校"
      >
        <a-input
          v-decorator="[
            'school',
            { rules: [{ required: true, message: '请输入您的毕业学校' }] },
          ]"
          placeholder="请输入您的毕业学校"
        />
      </a-form-item>

    <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="专业"
      >
        <a-input
          v-decorator="[
            'subject',
            { rules: [{ required: true, message: '请输入您的专业' }] },
          ]"
          placeholder="请输入您的专业"
        />
      </a-form-item>
      <a-form-item label="学历" has-feedback
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol">
            <a-select
                v-decorator="[
                'educationalBackground',
                { rules: [{ required: true, message: '请选择您的学历' }] },
                ]"
                placeholder="请选择您的学历"
            >
                <a-select-option value="小学">
                小学
                </a-select-option>
                <a-select-option value="初中">
                初中
                </a-select-option>
                <a-select-option value="高中">
                高中
                </a-select-option>
                <a-select-option value="专科">
                专科
                </a-select-option>
                <a-select-option value="本科">
                本科
                </a-select-option>
                <a-select-option value="硕士研究生">
                硕士研究生
                </a-select-option>
                <a-select-option value="博士">
                博士
                </a-select-option>
                <a-select-option value="博士后">
                博士后
                </a-select-option>
            </a-select>
        </a-form-item>
      
      <a-form-item v-bind="formItemLayout" label="电子邮箱">
        <a-input placeholder="请输入您的电子邮箱"
          v-decorator="[
            'email',
            {
              rules: [
                {
                  type: 'email',
                  message: '这不是有效的邮箱地址',
                },
                {
                  required: true,
                  message: '请输入您的邮箱地址',
                },
              ],
            },
          ]"
        />
      </a-form-item>
    
      <a-form-item v-bind="formItemLayout" label="电话号码">
        <a-input placeholder="请输入您的电话号码"
          v-decorator="[
            'phone',
            {
              rules: [{ required: true, message: '请输入您的电话号码' },{min:11,max:11,message:'请输入正确的电话号码'}],
            },
          ]"
          style="width: 100%"
        >
          <a-select
            slot="addonBefore"
            v-decorator="['prefix', { initialValue: '86' }]"
            style="width: 70px"
          >
            <a-select-option value="86">
              +86
            </a-select-option>
            <a-select-option value="87">
              +87
            </a-select-option>
          </a-select>
        </a-input>
      </a-form-item>
      

        <a-form-item label="是否同意公司安排你到异地工作或者经常出差" has-feedback
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol">
            <a-select
                v-decorator="[
                'isEvection',
                { rules: [{ required: true, message: '请选择您是否同意公司安排你到异地工作或者经常出差' }] },
                ]"
                placeholder="您是否同意公司安排你到异地工作或者经常出差"
            >
                <a-select-option value="同意">
                同意
                </a-select-option>
                <a-select-option value="不同意">
                不同意
                </a-select-option>
            </a-select>
        </a-form-item>

        <a-form-item label="在本公司是否有亲戚" has-feedback
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol">
            <a-select
                v-decorator="[
                'isrelation',
                { rules: [{ required: true, message: '在本公司是否有亲戚' }] },
                ]"
                placeholder="在本公司是否有亲戚"  v-model="relation"
            >
                <a-select-option value="有">
                有
                </a-select-option>
                <a-select-option value="无">
                无
                </a-select-option>
            </a-select>
        </a-form-item>
        <a-form-item v-if="relation == '有'"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="亲戚姓名"
      >
        <a-input
          v-decorator="[
            'relationName',{ rules: [{ required: true, message: '请输入您的亲戚姓名' }] },
          ]"
          placeholder="请输入您的亲戚姓名"
        />
      </a-form-item>
      <a-form-item v-if="relation == '有'"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="关系"
      >
        <a-input
          v-decorator="[
            'relationShip',{ rules: [{ required: true, message: '请输入您和您亲戚的关系' }] },
          ]"
          placeholder="请输入您和您亲戚的关系"
        />
      </a-form-item>
      <a-form-item v-if="relation == '有'"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="所在部门及职务"
      >
        <a-input
          v-decorator="[
            'departmentPosition',{ rules: [{ required: true, message: '请输入您亲戚的所在部门' }] },
          ]"
          placeholder="请输入您亲戚的所在部门"
        />
      </a-form-item>

      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="期望薪资(币种：RMB，单位：元/月)"
      >
        <a-input
          v-decorator="[
            'hopeWage',
            { rules: [{ required: true, message: '请输入您期望的待遇' }] },
          ]"
          placeholder="您期望的待遇"
        />
      </a-form-item>

      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="您能接受的最低薪资(币种：RMB，单位：元/月)"
      >
        <a-input
          v-decorator="[
            'lowestWage',
            { rules: [{ required: true, message: '请输入您能接受的最低薪资' }] },
          ]"
          placeholder="您能接受的最低薪资"
        />
      </a-form-item>

      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="其他要求(附带选填项，没有可不填)"
      >
        <a-input
          v-decorator="[
            'otherRequire',
            {initialValue:''}
          ]"
          placeholder="请输入您的其他要求(可不填)"
        />
      </a-form-item>

        <a-form-item
          label="可到职时间"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol">
            <a-date-picker placeholder="可到职时间" v-decorator="['arrivalDay', {rules: [{ type: 'object', required: true, message: '请输入可到职时间' }]}]" />
        </a-form-item>

      <!-- <a-form-item v-bind="tailFormItemLayout">
        <a-button type="primary" html-type="submit">
          Register
        </a-button>
      </a-form-item> -->
    </a-form>
  </template>
  <script>
  export default {
    name: 'App',
    components: {
    },
    data() {
      return {
        relation:'',
        confirmDirty: false,
        autoCompleteResult: [],
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 8 },
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
          },
        },
        tailFormItemLayout: {
          wrapperCol: {
            xs: {
              span: 24,
              offset: 0,
            },
            sm: {
              span: 16,
              offset: 8,
            },
          },
        },
        firstvalues:{
            passby:0

        }
      };
    },
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: 'first' });
    },
    methods: {
      onChange(date, dateString) {
        console.log(date, dateString);
      },
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFieldsAndScroll((err, fieldsValue) => {
          if (!err) {
            const firstvalues = {
            ...fieldsValue,
            'birthday': fieldsValue['birthday'].format('YYYY-MM-DD'),
            'applicationDay': fieldsValue['applicationDay'].format('YYYY-MM-DD'),
            'arrivalDay': fieldsValue['arrivalDay'].format('YYYY-MM-DD'),
          }
            console.log('Received values of form: ', firstvalues);
            
            this.firstvalues = firstvalues
            this.firstvalues.passby = 1
            // this.$router.push({path:"/submit"})
          }
        });
      },
      handleConfirmBlur(e) {
        const value = e.target.value;
        this.confirmDirty = this.confirmDirty || !!value;
      },

      //定义身份证验证方法
      orginIdcard(rule,value,callback){
        // let partn = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$///先用正则判断是否为正确的格式
        // if(!partn.exec(value)){
        //   callback(new Error('请检查您输入的身份证格式是否正确1！'))
        // }else{
        //   let number = [...value]
        //   let ration = new Array("7","9","10","5","8","4","2","1","6","3","7","9","10","5","8","4","2")//系数
        //   let ration22= new Array("1","0","X","9","8","7","6","5","4","3","2")
        //   let sum=0
        //   for(let i=0;i<number.length-1;i++){
        //             sum=number[i]*ration[i]+sum;
        //         }
        //   let mod = sum%11;
        //   if(ration22[mod] == number[17]){
        //     callback(new Error('请检查您输入的身份证格式是否正确！'))
        //   }else{
        //     callback()
        //   }
        // }
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      const reg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (reg.test(value) && this.calculate(value)) {
        //如果需要 实现自动生成生日，性别，年龄
        //await this.go(value.length)
        callback()
      } else {
        callback(new Error('身份证号码不正确'))
      }

      },
       //校验身份证最后一位
    calculate(rule,value,callback){
      // 前17位每项的系数
      let coefficient = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
      // 除11取余的结果对应的校验位（最后一位）的值
      let checkDigitMap = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
      var arr = value.split('')
      let sum = 0;
      for (var i = 0; i < 17; i++){
        sum += coefficient[i] * parseInt(arr[i])
      }
      if(checkDigitMap[sum % 11] === arr[17] ){
        callback()
      }
      callback(new Error('身份证最后一位错误！'))
      }
    },
  };
  </script>